<template>
  <div class="home">
  
    <div class="student-search">
      <h1>温州理工滨海校区</h1>
      <div class="search-box">
        <input 
          type="text" 
          v-model="studentId" 
          placeholder="请输入学号"
          @keyup.enter="searchStudent"
        >
        <button @click="searchStudent">查询</button>
      </div>
      
      <div class="student-info" v-if="student">
        <h2>学生信息</h2>
        <p><strong>学号： </strong>{{ student.id }}</p>
        <p><strong>姓名： </strong>{{ student.name }}</p>
        <p><strong>性别： </strong>{{ student.gender }}</p>
        <p><strong>年龄： </strong>{{ student.age }}</p>
        <p><strong>专业： </strong>{{ student.major }}</p>
        <p><strong>班级： </strong>{{ student.class }}</p>
      </div>
      
      <div class="error-message" v-if="errorMessage">
        {{ errorMessage }}
      </div>
    </div>
  </div>
</template>

<script>
// 模拟学生数据
var mockStudents = [
  { id: '202401', name: '张三 ', gender: '男', age: 20, major: '计算机科学', class: '计科1班' },
  { id: '202402', name: '李四 ', gender: '女', age: 19, major: '软件工程', class: '计科2班' },
  { id: '202403', name: '王五 ', gender: '男', age: 21, major: '人工智能', class: '计科1班' },
  { id: '202404', name: '赵六 ', gender: '女', age: 20, major: '数据科学', class: '计科2班' }
];

module.exports = {
  name: 'HomeView',
  data: function() {
    return {
      studentId: '',
      student: null,
      errorMessage: ''
    };
  },
  methods: {
    searchStudent: function() {
      var self = this;
      self.student = null;
      self.errorMessage = '';
      
      if (!self.studentId.trim()) {
        self.errorMessage = '请输入学号';
        return;
      }
      
      setTimeout(function() {
        var foundStudent = mockStudents.find(function(student) {
          return student.id === self.studentId;
        });
        
        if (foundStudent) {
          self.student = foundStudent;
        } else {
          self.errorMessage = '未找到该学号对应的学生信息';
        }
      }, 300);
    }
  }
};
</script>

<style scoped>
.home {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.student-search {
  margin-top: 20px;
}

.search-box {
  margin: 20px 0;
}

.search-box input {
  padding: 8px 12px;
  width: 200px;
  margin-right: 10px;
}

.search-box button {
  padding: 8px 16px;
  background-color: grayscale;
  color: black;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}



.student-info {
  margin-top: 30px;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  text-align: left;
  display: inline-block;
}

.student-info p {
  margin: 10px 0;
}

.error-message {
  color: red;
  margin-top: 20px;
}
</style>